<template>
  <div class="authorization" v-loading="loading">
    <div class="authorization_top">
      <div class="authorization_top_appInfo tc">
        <span>
          {{ $t("sys.apply_name") }}：<span>{{ APP_INFO.appName }}</span>
        </span>
        <span class="ml60">
          {{ $t("sys.appUniqueId") }}：<span>{{ APP_INFO.appUniqueId }}</span>
        </span>
        <span class="ml60">
          授权状态：<span class="item-content"></span><span style="color: #c01d02">已取消</span>
        </span>
        <span class="ml60">
          取消时间：<span>{{ getAuthCenterInfo.cancelDate | moment }}</span>
        </span>
      </div>
      <div class="authorization_top_content tc mb10">
        <el-skeleton :loading="!QRcodeUrl" animated>
          <template slot="template">
            <div style="display: flex; align-items: center; flex-direction: column">
              <el-skeleton-item variant="image" style="width: 200px; height: 200px" class="mb20" />
              <el-skeleton-item variant="text" style="width: 100px; margin-top: 16px" />
            </div>
          </template>
          <template v-if="QRcodeUrl">
            <img :src="QRcodeUrl" width="140" height="140" />
            <div style="font-size: 12px; color: #69717c">
              小程序扫码解绑激活码
            </div>
            <el-button class="dymBtn" @click="unbind" type="primary" :loading="unbindLoading">确认解绑</el-button>
          </template>
        </el-skeleton>
      </div>
    </div>
    <div>
      <div class="footer">
        <div class="footer_title">
          感谢您使用<span class="b">{{ APP_INFO.appName }}</span>系统
        </div>
        <div class="footer_info">1.试用版本可免费体验30天，无功能限制。</div>
        <div class="footer_info">
          2.如果您已经购买激活码，请完成授权激活后继续使用系统。
        </div>
        <div class="footer_info">3.如果您还未购买，可以联系我们购买。</div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getRemoteUnbindInfo,
  confirmUnbind,
} from "@/customApi/license.js"
import { mapGetters } from "vuex"
import Upload from "./upload"
import QRCODE from "qrcode"

export default {
  name: "Unbind",
  components: { Upload },
  data() {
    return {
      loading: true,
      unbindLoading: false,
      QRcodeUrl: "",
    }
  },
  computed: {
    ...mapGetters(["APP_INFO", "getAuthCenterInfo"]),
  },
  async created() {
    this.getQRcode()
  },
  methods: {
    // 获取二维码
    async getQRcode() {
      let res = await getRemoteUnbindInfo()
      this.QRcodeUrl = await QRCODE.toDataURL(res, {
        margin: 2,
      })
      this.loading = false
    },
    // 解绑
    unbind() {
      this.$confirm("确定已完成扫码解绑", "提示", {
        type: "warning",
        center: true,
      }).then(async () => {
        await confirmUnbind()
        await this.$store.dispatch("GetLicenseInfoDto")
        this.$emit('changeStatus', { type: 'unbind' })
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.authorization {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;

  &_top {
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;

    &_header {
      height: 56px;
      line-height: 56px;
      margin-bottom: 24px;

      .container {
        text-align: center;

        .title {
          font-size: 24px;
          font-weight: 600;
        }
      }
    }

    &_appInfo {
      margin: 24px 83px;
      background-color: rgba(237, 237, 237, 1);
      border-radius: 4px;
      line-height: 44px;
      border: 1px rgba(231, 231, 231, 1);

      .item-content {
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: #c01d02;
        margin-right: 5px;
        vertical-align: inherit;
        position: relative;
        top: -2px;
      }
    }

    &_content {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;

      .dymBtn {
        margin-top: 44px;
        width: 176px;
      }
    }
  }

  .footer {
    padding: 33px 130px 40px;
    background: #ebf3fe;
    border-radius: 4px;

    &_title {
      color: #69717c;
      margin-bottom: 22px;
      font-size: 12px;
    }

    &_info {
      font-size: 12px;
      color: #2b3648;
      line-height: 30px;
    }
  }
}
</style>
